$(function () {
  initCateList()
  function initCateList() {
    axios.get('/my/cate/list').then(({ data: res }) => {
      const rows = []
      res.data.forEach((item, index) => {
        rows.push(`
        <tr>
        <td>${index+1}</td>
        <td>${item.cate_name}</td>
        <td>${item.cate_alias}</td>
        <td>
          <button type="button" class="layui-btn layui-btn-xs btn-edit" data-id="${item.id}">修改</button>
          <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="${item.id}">删除</button>
        </td>
      </tr>`)
      })
      $('tbody').html(rows)
    })
  }
  let addIndex = null
  $('.layui-btn-normal').on('click', function () {
    addIndex = layer.open({
      type: 1,
      area:['500px','250px'],
      title: '添加文章分类',
      content:$('#template-add').html()
    });      
  })
 
  layui.form.verify({
    name: [/^\S{1,10}$/, '分类名称必须是1-10位非空字符串'],
    alias:[/^[a-zA-Z0-9]{1,15}$/,'分类别名必须是1-15位的字母和数字']
  })
  $('body').on('submit', '#form-add', function (e) {
    e.preventDefault()
    const data = $(this).serialize()
    axios.post('/my/cate/add',data ).then(({ data: res }) => {
      if (res.code===0) {
        layer.msg('添加分类成功^_^')
        initCateList()
        layer.close(addIndex)
      } 
    })
  })


// 未修改按钮绑定 click 点击事件
  let editIndex = null
  $('tbody').on('click', '.btn-edit', function () {
    const id = $(this).attr('data-id')
    if (id == 1 || id == 2) {
      return layer.msg('管理员不允许修改此数据!')
    }
    // 弹层
    editIndex = layer.open({
      type: 1,
      area: ['500px', '300px'],
      title: '修改文章分类',
      content: $('#template-edit').html()
    })
  
    // const id = $(this).attr('data-id')
    // console.log(id);
      axios.get('/my/cate/info', {
        params: { id }
      }).then(({ data: res }) => {
        if (res.code === 0) {
        //  实现表单数据回显
          layui.form.val('form-edit',res.data)
       }
       })
  })
  // 监听修改表单的submit 事件
  $('body').on('submit', '#form-edit', function (e) {
    // 阻止提交默认行为
    e.preventDefault()
    // 快速拿到表单中的数据
    const data = $(this).serialize()
    
    // 发起请求提交数据
    axios.put('/my/cate/info', data).then(({ data: res }) => {
      if (res.code === 0) {
        // 提示用户更新数据成功
        layer.msg('更新分类成功!')
        // 关闭弹出层
        layer.close(editIndex)
        // 刷新列表数据
        initCateList()
      }
    })
  })
  $('tbody').on('click', '.btn-delete', function () {
    let id = $(this).attr('data-id')
    // 判断数据是否允许被删除
    if (id == 1 || id == 2) {
      return layer.msg('不能删除前两个数据!')
    }
    
    layer.confirm('是否删除', { icon: 3, title: '提示' }, function (index) {
    axios.delete('/my/cate/del', {
      params:{id}
    }).then(({ data: res }) => {
      if (res.code === 0) {
        initCateList()
      }
      layer.close(index)
    })
  })
  })
})


